﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/HT_Layout.cshtml";
}

<div class="box-body">
    <div class="btn btn-success" id="Add">添加商品</div>
    <table class="display table table-hover table-bordered datatable" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>编号</th>
                <th>商品名</th>
                <th>蛋糕图片</th>
                <th>蛋糕人气热度</th>
                <th>材料</th>
                <th>包装</th>
                <th>说明</th>
                <th>赠品</th>
                <th>配送</th>
                <th>商品分类</th>
                <th>口味分类</th>
                <th>层次分类</th>
                <th>形状分类</th>
                <th>操作</th>
            </tr>
        </thead>
    </table>
</div>


@section myScript{
    <script>
        var ff = 0;
        var el = $(".datatable");
        var url = serverPath + "HT_Goods/GetAll";
        var menthod = "post";
        var colunm = [
            { data: 'Id' },
            { data: 'GoodsName' },
            { data: 'Cover' },
            { data: 'GoodsHeat' },
            { data: 'Material' },
            { data: 'Packing' },
            { data: 'Explan' },
            { data: 'Gift' },
            { data: 'Delivery' },
            { data: "CategoryId" },
            { data: 'TastId' },
            { data: 'LayerId' },
            { data: 'ShapeId' },
            { data: 'aa' }
        ];
        var datatable = DataTableInit(el, url, menthod, colunm);

        //添加
        $("#Add").on("click", function () {
            $("#myModal h3").text("添加商品");

            $.get(serverPath + "HT_Goods/Add", null, function (data) {
                $("#myModal .modal-body").html(data);
                //设置上传

                $("#Cover").change(function (e) {
                    /* console.log(e)*/
                    new html5ImgCompress(e.target.files[0], {
                        before: function (file) {
                            /*console.log(file)*/
                        },
                        done: function (file, base64) {
                            $("#viewimg").attr("href", base64).show();
                            ff = base64;
                            /*console.log(base64.length);*/
                            console.log(ff);
                        }
                    });
                })
                $("#myModal #btnSubmit").on("click", function () {
                   
                    if (ff) {
                        var p = {
                            GoodsName: $("#GoodsName").val(),
                            Cover: ff,
                            GoodsHeat: $("#GoodsHeat").val(),
                            Material: $("#Material").val(),
                            Packing: $("#Packing").val(),
                            Explan: $("#Explan").val(),
                            Gift: $("#Gift").val(),
                            Delivery: $("#Delivery").val(),
                            CategoryId: $("#CategoryId").val(), 
                            TastId: $("#TastId").val(),
                            LayerId: $("#LayerId").val(),
                            ShapeId: $("#ShapeId").val()
                        }
                        console.log(p);
                        $.post(serverPath + "HT_Goods/Add", p, function (data) {
                            if (data.Code==200) {
                                layer.msg(data.Message);
                                $("#myModal").modal("hide");
                                datatable.ajax.reload();
                            }
                        })
                    }
                })


            })
            $("#myModal").modal("show");
        })

        //编辑
        function Edit(a) {
            var id = $(a).attr("data-id");
            
            $("#myModal h3").text("修改商品");
            $.get(serverPath + "HT_Goods/Edit", { id }, function (data) {
                $("#myModal .modal-body").html(data);
               
                $("#Cover").change(function (e) {
                    /* console.log(e)*/
                    new html5ImgCompress(e.target.files[0], {
                        before: function (file) {
                            /*console.log(file)*/
                        },
                        done: function (file, base64) {
                            $("#viewimg").attr("href", base64).show();
                            ff = base64;
                            /*console.log(base64.length);*/
                            console.log(ff);
                        }
                    });
                })
                $("#myModal #btnSubmit").on("click", function () {
                    var p = {
                        Id: id,
                        GoodsName: $("#GoodsName").val(),
                        Cover: ff ? ff : $("#viewimg").attr("data-value"),
                        GoodsHeat: $("#GoodsHeat").val(),
                        Material: $("#Material").val(),
                        Packing: $("#Packing").val(),
                        Explan: $("#Explan").val(),
                        Gift: $("#Gift").val(),
                        Delivery: $("#Delivery").val(),
                        CategoryId: $("#CategoryId").val(),
                        TastId: $("#TastId").val(),
                        LayerId: $("#LayerId").val(),
                        ShapeId: $("#ShapeId").val()
                    }
                    console.log(p);
                    $.post(serverPath + "HT_Goods/Edit", p, function (data) {
                        if (data.Code == 200) {
                            layer.msg(data.Message);
                            $("#myModal").modal("hide");
                            datatable.ajax.reload();
                        }
                    })
                })

                $("#myModal").modal("show");
            })
        }

        function Delete(a) {
            var id = $(a).attr("data-id");
            $.post(serverPath + "HT_Goods/Delete", { id }, function (data) {
                if (data.Code == 200) {
                    layer.msg(data.Message);
                    datatable.ajax.reload();
                }
                else {
                    layer.msg(data.Message);
                }
            })
        }

        function viewIn(a) {
            var url = $(a).attr("href");
            var $box = $('<div id="viewbox"><img src="' + url + '"class="img-polaroid"/></div>');
            $box.appendTo("body");
            $(a).mousemove(function (e) {
                var left = e.pageX + 20;
                var top = e.pageY - 100;
                $box.css({ left, top });
                console.log(e);
            })
        }

        function viewOut(a) {
            $("#viewbox").remove();
        }
    </script>
}

@section myCss{
    <style>
        #viewbox {
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 999;
            width: 200px;
        }
    </style>

}

